<template>
  <div>
    <Find-view
      @search="handleSearch"
      @reset="handleReset"
      :formItems="[
        {
          type: 'input',
          key: 'categoryName',
          label: '分类名称',
          placeholder: '请输入(模糊查询)',
          width: '180px',
        },
        {
          type: 'dateRange',
          key: 'register',
          label: '注册时间',
          format: 'yyyy-MM-dd HH:mm:ss',
        },
      ]"
      :searchBtn="{ text: '搜索' }"
      :resetBtn="{ text: '重置' }"
      labelWidth="90px"
    ></Find-view>

    <el-button
      type="primary"
      class="el-icon-plus"
      style="float: left; margin: 20px 0px"
      @click="dialogFormVisible = true"
      >新增</el-button
    >

    <el-dialog
      title="新增分类"
      :visible.sync="dialogFormVisible"
    >
      <el-form  :rules="rules" :model="form" ref="cateForm">
        <el-form-item prop="name" label="分类名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form> 
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
     
        <el-button type="primary" @click="newCate">提交</el-button>
      </div>
    </el-dialog>

 
    <el-table :data="list" style="width: 100%; margin-top: 10px">
      <el-table-column label="名称" width="180">
        <template slot-scope="scope">
          <el-tag size="medium">{{ scope.row.name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 10px; text-align: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="ruleForm.current"
        :page-sizes="[10, 20, 50]"
        :page-size="ruleForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FindView from "../components/FindView.vue";
export default {
  components: { FindView },
  data() {
    return {
      list: [],
      total: {
        total: 0,
        pages: 0,
        size: 10,
        current: 1,
      },
      dialogTableVisible: false,
      dialogFormVisible: false,
      ruleForm: {
        current: 1,
        size: 10,
        categoryName: "",
        registerStart: null,
        registerEnd: null,
      },
      form: {
        name: "", 
      },
      formLabelWidth: "120px",
      rules: {
        name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 1 到 10 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getlist();
  },
  methods: {
    handleSearch(searchParams) {
      this.ruleForm = {
        ...this.ruleForm,
        ...searchParams,
        current: 1,
      };
      this.getlist();
    },
    handleReset() {
      this.ruleForm = {
        current: 1,
        size: this.ruleForm.size,
        categoryName: "",
        registerStart: null,
        registerEnd: null,
      };
      this.getlist();
    },
    handleSizeChange(val) {
      this.ruleForm.size = val;
      this.ruleForm.current = 1;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.ruleForm.current = val;
      this.getlist();
    },
    async getlist() {
      try {
        const res = await this.$axios.post(
          "/api/admin/category/list",
          this.ruleForm
        );
        this.list = res.data.data || [];
        this.total = {
          ...this.total,
          total: res.data.total || 0,
          current: res.data.current || 1,
          size: res.data.size || 10,
        };
      } catch (err) {
        this.$message.error("获取分类列表失败：" + (err.message || "网络异常"));
      }
    },
   
    handleDelete(row) {
      this.$confirm(`确定删除分类《${row.name}》?`, "警告", {
        type: "warning",
      })
        .then(async () => {
          try {
            await this.$axios.post("/api/admin/category/delete", { categoryId: row.id });
            this.$message.success("删除成功");
            this.getlist();
          } catch (err) {
            this.$message.error(err.message || "删除失败");
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

  
    async newCate() {
    
      try {
        await this.$refs.cateForm.validate(); 
      } catch (err) {
        return; 
      }

    
      try {
    
        const res = await this.$axios.post("/api/admin/category/add", {
          name: this.form.name
        });
        console.log(res);
        this.$message.success("新增成功");
        this.dialogFormVisible = false; 
        this.getlist(); 
        this.form.name = ""; 
      } catch (err) {
        this.$message.error(err.message || "新增失败");
      }
    },

    cancelAdd() {
      this.$refs.cateForm.resetFields();
      this.dialogFormVisible = false;
    }
  },
};
</script>

<style scoped>
</style>